<template>
  <div v-show="show">
    <div>
      <Header></Header>
    </div>
    <div>
      <div class="main-body">
        <div class="main-content">
          <div>
            <Crumbs></Crumbs>
          </div>
          <div class="change_center" v-if="!successsta">
            <div class=" change_success uploadsuccess">
              <div class="upload_li">
                <span>品牌：</span>
                <Dropdown trigger="click" @on-click="cartypes">
                  <a href="javascript:void(0)">
                    {{cartype}}
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem v-for="(item,index) in getCarTypeList" :name="item.ca_id" :key="index">{{item.ca_name}}</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </div>
              <div class="upload_li">
                <span>标题：</span>
                <input type="text" placeholder="请输入测评标题" v-model="info.title"/>
              </div>
              <div class="upload_li">
                <span>封面图：</span>
                <div class="upload_kl">
                  <img :src="info.image" alt="">
                  <input type="file"  @change='add_img' accept="image/gif, image/jpeg, image/png"/>
                </div>
              </div>
              <div v-if="name == '爱车测评'">
                <div class="upload_li">
                  <span>车辆性能：</span>
                  <div class="components-container">
                    <!--<button @click="getUEContent()">获取内容</button>-->
                    <div class="editor-container">
                      <UE :defaultMsg=info.property :config=config1 ref="ue1" :id="ue1"></UE>
                    </div>
                  </div>
                  <!--<textarea name="" cols="30" rows="10" placeholder="请输入车辆性能" v-model="info.property"></textarea>-->
                </div>
                <div class="upload_li">
                  <span>安全测评：</span>
                  <!--<textarea name=""  cols="30" rows="10" placeholder="请输入安全测评" v-model="info.safety"></textarea>-->
                  <div class="editor-container">
                    <UE :defaultMsg=info.safety :config=config2 ref="ue2" :id="ue2"></UE>
                  </div>
                </div>
                <div class="upload_li">
                  <span>耗油检测：</span>
                  <!--<textarea name="" cols="30" rows="10" placeholder="请输入耗油检测" v-model="info.oil"></textarea>-->
                  <div class="editor-container">
                    <UE :defaultMsg=info.oil :config=config3 ref="ue3" :id="ue3"></UE>
                  </div>
                </div>
                <div class="upload_li">
                  <span>综合测评：</span>
                  <!--<textarea name=""  cols="30" rows="10" placeholder="请输入综合测评" v-model="info.synthesize"></textarea>-->
                  <div class="editor-container">
                    <UE :defaultMsg=info.synthesize :config=config4 ref="ue4" :id="ue4"></UE>
                  </div>
                </div>
              </div>
              <div class="upload_li" v-else>
                <span>服务测评：</span>
                <!--<textarea name=""  cols="30" rows="10" placeholder="请输入服务测评" v-model="info.service"></textarea>-->
                <div class="editor-container">
                  <UE :defaultMsg=info.service :config=config5 ref="ue5" :id="ue5"></UE>
                </div>
              </div>
              <div class="upload_li">
                <span>选择标签：</span>
                <ul class="upload_li_tab">
                  <li :class="{'active' : info.label.indexOf(item.la_id) > -1}" v-for="(item,index) in getLabelList" @click="labclick(item.la_id)">{{item.la_name}}</li>
                </ul>
              </div>
              <div class="btn" @click="submit">
                提交
              </div>
            </div>
          </div>
          <div class="change_center" v-else>
            <div class=" change_success uploadsuccess">
              <img src="../../static/image/e_0.png" alt="">
              <p>恭喜您，上传测评成功！</p>
              <div class="btn_back" @click="goback">返回列表</div>
              <div class="btn_can">查看我的上传</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
//  let $ = require('Jquery')
  import UE from './Ueditor.vue'
  import 'iview/dist/styles/iview.css'
  import { mapState } from 'vuex'
  import Header from './Header'
  import Footer from './Footer'
  import Crumbs from './Crumbs'
//  import store from './store/index.js'
  export default {
    name: 'revehicle',
    components: {
      'Header': Header,
      'Footer': Footer,
      'Crumbs': Crumbs,
      UE
    },
    data () {
      return {
        show: false,
        defaultMsg: '',
        config1: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        config2: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        config3: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        config4: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        config5: {
          initialFrameWidth: null,
          initialFrameHeight: 330
        },
        ue1: 'ue1',
        ue2: 'ue2',
        ue3: 'ue3',
        ue4: 'ue4',
        ue5: 'ue6',
        cartype: '请选择',
        getCarTypeList: [],
        successsta: false,
        getLabelList: [],
        submitaddAjax: true,
        name: '',
        img: {},
        url: 'Evaluation/addCarEvaluation',
        info: {
          title: '',
          image: '../../static/image/ac_7.png',
          ca_id: '',
          property: '',
          safety: '',
          oil: '',
          synthesize: '',
          label: [],
          service: ''
        }
      }
    },
    computed: mapState({
      crumbs: state => state.crumbs
    }),
    created: function () {
      this.verify()
    },
    activated: function () {
      this.successsta = false
      this.cartype = '请选择'
      this.info = {
        title: '',
        image: '../../static/image/ac_7.png',
        ca_id: '',
        property: '',
        safety: '',
        oil: '',
        synthesize: '',
        label: [],
        service: ''
      }
      this.verify()
    },
    methods: {
      getUEContent () {
        let content = this.$refs.ue.getUEContent()
        console.log(content)
      },
      cartypes (caid) {
        this.info.ca_id = caid
        for (let i = 0; i < this.getCarTypeList.length; i++) {
          if (this.getCarTypeList[i].ca_id === caid) {
            this.cartype = this.getCarTypeList[i].ca_name
          }
        }
      },
      labclick: function (laid) {
        let curindex = this.info.label.indexOf(laid)
        if (this.info.label.indexOf(laid) > -1) {
          this.info.label.splice(curindex, 1)
        } else {
          this.info.label.push(laid)
        }
      },
      submit: function () {
        let thisObj = this
        if (thisObj.name === '爱车测评') {
          let content1 = this.$refs.ue1.getUEContent()
          let content2 = this.$refs.ue2.getUEContent()
          let content3 = this.$refs.ue3.getUEContent()
          let content4 = this.$refs.ue4.getUEContent()
          thisObj.info.property = content1
          thisObj.info.safety = content2
          thisObj.info.oil = content3
          thisObj.info.synthesize = content4
        } else {
          let content5 = this.$refs.ue5.getUEContent()
          thisObj.info.service = content5
        }
        if (thisObj.info.ca_id === '') {
          thisObj.$vux.toast.show({
            text: '请选择品牌',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.info.title === '') {
          thisObj.$vux.toast.show({
            text: '请输入测评标题',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.info.image === '../../static/image/ac_7.png') {
          thisObj.$vux.toast.show({
            text: '请上传封面图',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.name === '爱车测评') {
          if (thisObj.info.property === '') {
            thisObj.$vux.toast.show({
              text: '请输入性能测评内容',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          if (thisObj.info.safety === '') {
            thisObj.$vux.toast.show({
              text: '请输入安全测评内容',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          if (thisObj.info.oil === '') {
            thisObj.$vux.toast.show({
              text: '请输入油耗测评内容',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
          if (thisObj.info.synthesize === '') {
            thisObj.$vux.toast.show({
              text: '请输入综合测评内容',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
        } else {
          thisObj.url = 'Evaluation/addServiceEvaluation'
          if (thisObj.info.service === '') {
            thisObj.$vux.toast.show({
              text: '请输入服务测评内容',
              type: 'text',
              width: '180px',
              position: 'bottom'
            })
            return false
          }
        }
        thisObj.submitAjax()
      },
      submitAjax: function () {
        let thisObj = this
        if (!thisObj.submitaddAjax) {
          return false
        }
        thisObj.submitaddAjax = false
        let formData = new FormData()
        if (thisObj.name === '爱车测评') {
          formData.append('image', thisObj.img)
          formData.append('title', thisObj.info.title)
          formData.append('ca_id', thisObj.info.ca_id)
          formData.append('property', thisObj.info.property)
          formData.append('safety', thisObj.info.safety)
          formData.append('oil', thisObj.info.oil)
          formData.append('synthesize', thisObj.info.synthesize)
          formData.append('label', thisObj.info.label)
        } else {
          formData.append('image', thisObj.img)
          formData.append('title', thisObj.info.title)
          formData.append('ca_id', thisObj.info.ca_id)
          formData.append('service', thisObj.info.service)
          formData.append('label', thisObj.info.label)
          console.log(JSON.stringify(formData))
        }
        thisObj.$chaos.ajax({
          data: formData,
          slient: false,
          userinfo: true,
          file: true,
          url: thisObj.url,
          callback: function (type, res) {
            thisObj.submitaddAjax = true
            if (res.status === 'SUCCESS') {
              thisObj.successsta = true
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      add_img: function () {
        let thisObj = this
        let file = event.target.files[0]
        thisObj.img = file
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function (e) {
          let base64Code = this.result
          thisObj.info.image = base64Code
        }
      },
      crumbLink: function (link, title, index) {
        if (link === '') {
          return false
        }
        console.log(this.crumbs)
        var crumb = []
        crumb = this.crumbs.slice(0, index + 1)
        this.$store.commit('crumbs', crumb)
        let routeUrl = this.$router.resolve({
          path: link,
          query: {
            cate: title
          }
        })
        window.open(routeUrl.href, '_self')
      },
      goback: function () {
        let thisObj = this
        let routeUrl = this.$router.resolve({
          path: '/VehicleCenter',
          query: {
            cate: thisObj.name
          }
        })
        window.open(routeUrl.href, '_self')
      },
      verify: function () {
        let thisObj = this
        thisObj.name = decodeURI(thisObj.$chaos.getQueryString('name'))
        var crumbs = []
        crumbs[0] = {
          title: thisObj.name,
          link: '/VehicleCenter'
        }
        crumbs[1] = {
          title: '上传' + thisObj.name,
          link: ''
        }
        console.log(JSON.stringify(crumbs))
        console.log(JSON.stringify('upload'))
        this.$store.commit('crumbs', crumbs)
        /* 测评标签接口 */
        thisObj.$chaos.ajax({
          data: {
            type: '测评'
          },
          slient: true,
          userinfo: false,
          url: 'User/getLabelList',
          callback: function (type, res) {
            thisObj.getEvaluationListAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              thisObj.getLabelList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
        /* 品牌 */
        thisObj.$chaos.ajax({
          data: {},
          slient: true,
          userinfo: false,
          url: 'Car/getCarTypeList',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.getCarTypeList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
//        $('')
      }
    }
  }
</script>
<style>
  .edui-default .edui-editor-bottomContainer table{
    display: none!important;
  }
  .ivu-dropdown-menu{
    min-width: 100px;
    height: 280px;
    background: #fff;
    overflow: auto;
  }
  .ivu-dropdown{
    margin-left: 38px;
  }
  .editor-container{
    width: 985px;
    margin-left: 162px;
  }
  .main-title span{
    font-size: 18px;
  }
  .ivu-dropdown-rel a{
    font-size: 17px;
    background: #fff;
    padding: 10px 15px;
    border-radius: 5px 5px;
    color: #000;
  }
  .ivu-icon-ios-arrow-down:before{
    color: #000;
  }
  .btn_back,.btn_can{
    cursor: pointer;
  }
  .upload_li img{
    width: 154px!important;
    height: 154px!important;
     padding: 0px!important;
     border: 0px!important;
  }
  .upload_kl{
    position: relative;
    height:145px;
  }
  .upload_kl>img{
    position: absolute;
    z-index:2;
  }
  .upload_kl>input{
    padding: 0px!important;
    width: 154px;
    height: 154px!important;
    position: absolute;
    z-index:3;
    opacity: 0;
  }
  .btn {
    background: url(../../static/image/t_1.png);
    background-size: cover;
    width: 300px;
    height: 45px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    margin: 74px auto 30px;
    box-shadow: 3px 3px 5px #489cfa;
    display: inherit;
    cursor: pointer;
  }
  *{
    font-family: '微软雅黑';
  }
  .upload_li_tab{
    width: calc(100% - 215px);
    margin-left: 145px;
    overflow: hidden;
  }
  .upload_li_tab li{
    padding: 0px 10px;
    border:1px solid #989898;
    color: #989898;
    text-align: center;
    line-height: 27px;
    float: left;
    cursor: pointer;
    margin-left:15px;
    margin-top:8px;
  }
  .upload_li_tab li.active{
    border:1px solid #4268e5;
    color: #4268e5;
  }
  .main-title span{
    cursor: pointer;
  }
  .blue_r{
    color: #528df5;
  }
</style>
<style scoped>
  .upload_li>span{
    color: #26298a;
    font-weight: 700;
    line-height: 44px;
  }
  .upload_li>input{
    height: 50px;
    padding: 0px 10px!important;
    font-size: 18px;
  }
  .change_center{
    margin-top: 40px;
  }
  .main-body {
    background: url(../../static/image/o_15.png) center top no-repeat;
    padding: 20px 0 50px;
  }
  .main-content {
    width: 1300px;
    margin: 0 auto;
  }
  .right {
    float: right;
  }
  .main-title .crumbs-icon{
    display: inline-block;
    width: 15px;
    height:15px;
    background-image: url("../../static/image/hierarchy-icon.png");
    background-size: 100% 100%;
    transform: translateY(2px);
    margin: 0 5px;
  }
  .main-title .current-position{
    color: #47A7FE;
  }
  .car-name{
    padding-top: 20px;
    font-size: 24px;
  }
</style>
